<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>booking</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/res/css/checkIn.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/res/css/booking.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body class="bodyType">
    <div class="title">
        <samp>客房预订</samp>
    </div>
    <div style="width: 1000px;" id="booking" v-cloak>
        <div class="total">
            <div class="checkInTitel">预订信息</div>
            <hr style="color: #f1f1f1; width: 100%;">
            <div class="userCondition">
                <label for="guestName"><samp style="color: red;">*</samp>预订人：</label>
                <input type="text" v-model="frist.guestName" style="width:  120px;" name="guestName" id="guestName">  
                <label for="sex" style="padding-left: 36px;">性别：</label>
                <select v-model="frist.sex" name="sex" id="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                <label for="identity" style="padding-left: 39px;"><samp style="color: red;">*</samp>身份证：</label>
                <input type="text" v-model="frist.identity"  name="identity" id="identity">
                <label for="tel" style="padding-left: 39px;"><samp style="color: red;">*</samp>电话号码：</label>
                <input type="text" v-model="frist.tel" name="tel" id="tel">
            </div>
            <div class="userCondition">
                <label for="arriveDay"><samp style="color: red;">*</samp>预达日期：</label>
                <input type="date" v-model="frist.beginDay"  style="width:  120px;" name="arriveDay" id="arriveDay">
                <label for="roomNum" style="padding-left: 39px;"><samp style="color: red;">*</samp>房号</label>
                <input type="text" v-model="frist.roomNum" style="width: 50px;" name="roomNum" id="roomNum">
                <label for="stayDay" style="padding-left: 39px;"><samp style="color: red;">*</samp>入住天数</label>
                <input type="text" v-model="frist.perDay" id="stayDay" style="width: 50px;">
            </div>
            <div class="userCondition">
                <label for="perpay">应预缴：</label>
                <div id="perpay" class="perpay">{{perpay}}</div>
                <label for="sum" style="padding-left: 36px;">总额：</label>
                <div id="sum" class="perpay">{{sum}}</div>
                <input type="button"  @click="select"  style="width: 50px; height: 26px; margin-left: 27px;" value="查询" id="select">
              </div>
        </div>
        <div class="total">
            <div class="checkInTitel">
                随行同伴信息
            </div>
            <hr style="color: #f1f1f1; width: 100%;">
             <!-- 同伴一 -->
            <div class="userCondition" v-for="item in companionList">
                <label for="guestName1"><samp style="color: red;">*</samp>姓名：</label>
                <input type="text" v-model="item.guestName" style="width:  81px;" name="guestName1" id="guestName1">  
                <label for="sex1" style="padding-left: 36px;">性别：</label>
                <select v-model="item.sex" name="sex1" id="sex1">
                <option value="男">男</option>
                <option value="女">女</option>
                </select>
                <label for="identity1" style="padding-left: 39px;"><samp style="color: red;">*</samp>身份证：</label>
                <input type="text" v-model="item.identity" name="identity1" id="identity1">
                <div class="telStyle">
                    <label for="tel1"><samp style="color: red;">*</samp>电话号码：</label>
                    <input type="text" v-model="item.tel" name="tel1" id="tel1">
                </div>
            </div>
            <!-- 添加或删除 -->
            <div class="userCondition">
                <input type="button" @click="addGuest" style="width: 50px; height: 26px;" value="添加">
                <input type="button" @click="deleteGuest" style="width: 50px; height: 26px; margin-left: 27px;" value="删除">
            </div>
        </div>
        <!-- 付款 -->
        <div class="total">
            <div class="checkInTitel">
                付款
            </div>
            <hr style="color: #f1f1f1; width: 100%;">
            <div class="userCondition">
                <label for="pay"><samp style="color: red;">*</samp>实付：</label>
                <input type="text" v-model="pay" style="width:  81px;" name="pay" id="pay">  
                <input type="button" name="submit" @click="submitInformation" value="提交信息" style=" height: 26px; margin-left: 20px;">
            </div>
        </div>
    </div>
    <script src="${pageContext.request.contextPath }/res/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath }/res/js/vue.js"></script>
    <script src="${pageContext.request.contextPath }/res/js/booking.js"></script>
</body>
</html>